﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Areas/Mobile/Views/Shared/Mobile.master" Inherits="System.Web.Mvc.ViewPage<SinBiota.Model.Business.MapServices.Datatypes.AvailableTileLayers>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
	Index
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

  
<script type="text/javascript">
    var map = null;
    var Layers = new Object;
    function toggleLayer(layerid, checked) {
        if (checked) {
            var options = { uriConstructor: "http://scyllabioinfo.homelinux.com:9000/Sinbiota/Services/TileLayerServer.ashx?layer=" + layerid + "&quadkey={quadkey}", width: 256, height: 256 };
            var tileSource = new Microsoft.Maps.TileSource(options);
            var tileLayer = new Microsoft.Maps.TileLayer({ mercator: tileSource, opacity:0.7 });
            Layers[layerid] = tileLayer;
            map.entities.push(tileLayer);
        }
        else {
            map.entities.remove(Layers[layerid]);
        }
    }

    // Start up:
    $(document).ready(function () {
        //init map
        GetMap();
        //click layer events:
        $(".layer_label").tap(function(obj) { 
            var layer = obj.currentTarget.id;
            var checked = $("#cb_"+layer).attr("checked");
            toggleLayer(layer, checked);
        });

    });
    function GetMap() {
            map = new Microsoft.Maps.Map(document.getElementById("mapDiv"), {
                credentials: "Am0QRkG0DpHYfSodIsutev7J-PXGJFTBfLDsZ6fiUqGwvaS__DXIUaxc-0ldZIDm",
                enableClickableLogo: false, enableSearchLogo: false,
                center: new Microsoft.Maps.Location(-22.3, -48.6), zoom: 6,
            });
    }


</script>
<div data-role="page" id="map">

	<div data-role="header" data-position="fixed" data-theme="b" >
	<h1>Atlas 2.0 </h1>
    <a href="#options" data-icon="gear" class="ui-btn-right">Options</a>
    
<a href="<%: Url.Action("Index","MobileHome") %>" data-icon="home" class="ui-btn-left" data-direction="reverse" >Home</a>
    </div>
    <div data-role="content">
	    <div id='mapDiv' class="BingMapMobile"></div>
	</div><!-- /content -->


</div><!-- /page -->

<div data-role="page" id="options">

	<div data-role="header" data-position="fixed" data-theme="b">
	<h1>Atlas 2.0 Options</h1>
    </div>
    <div data-role="content">
        <div data-role="fieldcontain">
 	        <fieldset data-role="controlgroup">
		        <legend>Choose Layers:</legend>

<% foreach (var layerGroup in Model.TileLayerGroups)
{ %>
    <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b"> 
			<li data-role="list-divider"><%: layerGroup.Name %></li> 
                <% foreach (var layer in layerGroup.Layers)
                { %>
                <input type="checkbox" name="<%: layer.Key %>" id="cb_<%: layer.Key %>" class="custom"/><label class='layer_label' id="<%: layer.Key %>" for="cb_<%: layer.Key %>"><%: layer.Name %></label> <%--toggleLayer(this, '<%: layer.Key %>');--%>
                <% } %>
    </ul>
<% } %>
            </fieldset>
        </div>

    </div><!-- /content -->

</div>

</asp:Content>
